/*
 * @Description:
 * @Author: HM
 * @Email: ming@cpglobalinnovation.com
 * @Date: 2025-02-08 12:04:52
 * @LastEditTime: 2025-02-10 12:22:27
 */
/*
 * Copyright (c) 2024 YuJie Ge(Smile)
 * Licensed under the MIT License.
 */
import { Menu, Button, Dropdown } from "@arco-design/web-react";
import { IconDown } from "@arco-design/web-react/icon";
import { useGlobalStore } from "../../store";
import zh from "../../assets/image/flagpack--cn.svg";
import en from "../../assets/image/flagpack--us.svg";

const menuConfig = [
  { id: "zh", name: "简体中文", flag: zh },
  { id: "en", name: "English", flag: en },
];
const localeMap: { [key: string]: string } = {};
for (const menu of menuConfig) {
  localeMap[menu.id] = menu.name;
}

function ToggleLanguage() {
  const { localeName, setLocale, setLocaleName } = useGlobalStore();
  function toggleLocale(locale: string) {
    setLocale(locale);
    setLocaleName(localeMap[locale]);
  }
  const dropList = (
    <Menu>
      {menuConfig.map((menu) => {
        return (
          <Menu.Item
            key={menu.id}
            onClick={() => toggleLocale(menu.id)}
            className="flex items-center"
          >
            <img
              src={menu.flag}
              style={{ width: 20, height: 20, margin: "0 8px" }}
            />
            <span className="text-xs">{menu.name}</span>
          </Menu.Item>
        );
      })}
    </Menu>
  );
  return (
    <Dropdown droplist={dropList} position="bottom">
      <Button type="text" className="!flex items-center">
        <img
          src={localeName === "English" ? en : zh}
          alt="China Flag"
          style={{ width: 20, height: 20, marginLeft: 8 }}
        />
        {/* <IconDown /> */}
      </Button>
    </Dropdown>
  );
}

export default ToggleLanguage;
